<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input name="orgId"  type="hidden" id="treeId"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">所属机构：</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" name="orgName" onclick="selectDeptTree()" readonly="true" id="orgName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="mustInput">*</span>充电站名称：</label>
                            <div class="col-sm-8">
                                <input id="name" name="name" data-null="请输入充电站名称" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="mustInput">*</span>充电站编号：</label>
                            <div class="col-sm-8">
                                <input id="num" name="num" data-null="请输入充电站编号" class="form-control" type="text">
                            </div>
                        </div>
                        <!--<div class="form-group">-->
                            <!--<label class="col-sm-3 control-label">地址：</label>-->
                            <!--<div class="col-sm-8">-->
                                <!--<input id="site" name="site" class="form-control" type="text">-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="mustInput">*</span>选择经纬度方式：</label>
                            <div class="col-sm-8">
                                <select id="xz" onchange="xzMapOrsd()" class="form-control m-b" data-null="请选择经纬度方式">
                                    <option value="0">请选择</option>
                                    <option value="1">手动填写</option>
                                    <option value="2">地图选择</option>
                                </select>
                            </div>
                        </div>
                        <div id="sdHide" style="display: none">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span class="mustInput">*</span>经度：</label>
                                <div class="col-sm-8">
                                    <input id="lon" name="lon" data-null="请输入经纬度" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span class="mustInput">*</span>纬度：</label>
                                <div class="col-sm-8">
                                    <input id="lat" name="lat" data-null="请输入经纬度" class="form-control" type="text">
                                </div>
                            </div>
                        </div>
                        <div id="mapHide" style="display: none">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"><span class="mustInput">*</span>经纬度：</label>
                                <div class="col-sm-8">
                                    <input id="coordinate" name="coordinate" class="form-control" type="text" maxlength="50"
                                           placeholder="地图上选择位置" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-11" id="container" style="height: 300px;overflow: hidden;margin:0;">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收费标准：</label>
                            <div class="col-sm-8">
                                <select id="rates" name="rates" class="selectpicker show-tick form-control" title="请选择">
                                    <option th:each="rates,ratesStat:${rateList}" th:value="${rates.id}" th:text="${rates.name}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">类型：</label>
                            <div class="col-sm-8">
                                <select id="type" name="type" class="selectpicker show-tick form-control" title="请选择" th:with="type=${@dict.getType('station_category')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">营业时间：</label>
                            <div class="col-sm-8">
                                <input id="businessTime" name="businessTime" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">支持支付类型：</label>
                            <div class="col-sm-8">
                                <select id="payType" name="payType" class="selectpicker show-tick form-control" title="请选择"  multiple data-live-search="true"  th:with="type=${@dict.getType('station_payType')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">是否在地上：</label>
                            <div class="col-sm-8">
                                <select id="isfloor" name="isfloor" class="selectpicker show-tick form-control" title="请选择" th:with="type=${@dict.getType('station_isfloor')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电站类别：</label>
                            <div class="col-sm-8">
                                <select id="stationType" name="stationType" class="selectpicker show-tick form-control" title="请选择" th:with="type=${@dict.getType('station_type')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </div>
                        </div>

                        <!-- 附加信息结束 -->
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <div class="btn btn-primary" onclick="save()">提交</div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.9&key=fcc9dac16234c3f28d35cd92d4add2db&plugin=AMap.Autocomplete"></script>
<script>

    /*司机管理-新增-选择部门树*/
    function selectDeptTree() {
        var treeId = $("#treeId").val();
        var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "system/dept/selectDeptTree/" + deptId;
        var options = {
            title: '选择部门',
            width: "380",
            url: ctx + "system/dept/selectDeptTree/" + deptId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero){
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#orgName").val(body.find('#treeName').val());
        layer.close(index);
    }

    $(function() {
        MapChoose();

    });

    function xzMapOrsd(){
        var xz=$("#xz").val();
        console.log(xz);
        if(xz==1){
            $("#sdHide").show();
            $("#mapHide").hide();
        }else if(xz==2){
            $("#sdHide").hide();
            $("#mapHide").show();
        }else if(xz==0){
            $("#sdHide").hide();
            $("#mapHide").hide();
        }
    }

    function save() {
        // 必输校验
        var hasFlag = 0;
        var xz=$("#xz").val();
        if(xz==0){
            hasFlag = 1;
            layer.msg("请选择填写经纬度方式:手动填写或者地图选择");
        }
        $('#signupForm input').each(function (index, item) {
            var val = $.trim($(item).val());
            var dataNull = $(item).data('null');
            if (!val && !hasFlag && dataNull) {
                hasFlag = 1;
                layer.msg(dataNull);
            }
        })
        if (hasFlag) {
            return;
        }
        $.ajax({
            cache: true,
            type: "POST",
            url: ctx+"cdzStation/addSave",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            error: function (request) {
                parent.layer.alert("网络超时");
            },
            success: function (data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                } else {
                    parent.layer.alert(data.msg)
                }

            }
        });
    }

    function MapChoose() {
        var longitude = 113.639294;
        var latitude = 34.75298;
        var marker, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [longitude, latitude],
            zoom: 13
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function (e) {
            $("#coordinate").val(e.lnglat.getLng() + ',' + e.lnglat.getLat());
            $("#lon").val(e.lnglat.getLng());
            $("#lat").val(e.lnglat.getLat());
        });
    }

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</body>
</html>
